<template>
  <div class="hear_BD">
    <div class="arrowsBox">
      <div class="arrowsItem" v-for="(item, index) in list" :key="index">
        <!-- arrows_active  选中背景 arrows_done  已完成背景 arrows_todo 未开始-->
        <div class="arrows-up arrows" :class="{
          arrows_active: item.prop == num,
          arrows_done: item.prop < num,
          arrows_todo: item.prop > num,
        }">
         <div class="icons">
            <img class="iconimg" v-if="item.prop == num" :src="item.img2" alt="" srcset="">
            <img class="iconimg" v-if="item.prop < num" :src="item.img3" alt="" srcset="">
            <img class="iconimg" v-if="item.prop > num" :src="item.img1" alt="" srcset="">
            <span class="icontext1" v-if="item.prop == num"> {{ item.label == "" ?'等待选择' : item.label}}</span>
            <span class="icontext2" v-if="item.prop < num"> {{ item.label == "" ?'等待选择' : item.label }}</span>
            <span class="icontext3" v-if="item.prop > num"> {{ item.label == "" ?'等待选择' : item.label }}</span>

            <!-- <img src="../../assets/BidSecurity/icon1.png" /> -->
           
          </div>
        


  
      
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BDhear",
  props: {
    //props列表
    num: Number,
  },
  data() {
    return {
      IconList: [
        {
          url: "../../assets/BidSecurity/icon.png",
          status: "0",
          name: "选择保函类型",
        },
        {
          url: "../../assets/BidSecurity/icon1.png",
          status: "1",
          name: "选择金融机构",
        },
        {
          url: "../../assets/BidSecurity/icon2.png",
          status: "0",
          name: "提交资料",
        },
        {
          url: "../../assets/BidSecurity/icon3.png",
          status: "0",
          name: sessionStorage.getItem("bhlein"),
        },
        {
          url: "../../assets/BidSecurity/icon5.png",
          status: "0",
          name: "电子签章",
        },
        {
          url: "../../assets/BidSecurity/icon6.png",
          status: "0",
          name: "支付",
        },
        {
          url: "../../assets/BidSecurity/icon7.png",
          status: "0",
          name: "发放保函",
        },
      ],
      list: [
        {
          label: "选择保函类型",
          prop: 1,
          img1: require("../../assets/BidSecurity/1-2.png"),
          img2: require("../../assets/BidSecurity/1-2.png"),
          img3: require("../../assets/BidSecurity/1-3.png"),
          status: "active",
        },
        {
          label: "选择金融机构",
          prop: 2,
          img1: require("../../assets/BidSecurity/2-1.png"),
          img2: require("../../assets/BidSecurity/2-2.png"),
          img3: require("../../assets/BidSecurity/2-3.png"),
          status: "todo",
        },
        {
          label: "提交资料",
          prop: 3,
          img1: require("../../assets/BidSecurity/3-1.png"),
          img2: require("../../assets/BidSecurity/3-2.png"),
          img3: require("../../assets/BidSecurity/3-3.png"),
          status: "todo",
        },
        {
          label: sessionStorage.getItem("bhlein"),
          prop: 4,
          img1: require("../../assets/BidSecurity/4-1.png"),
          img2: require("../../assets/BidSecurity/4-2.png"),
          img3: require("../../assets/BidSecurity/4-3.png"),
          status: "todo",
        },
        {
          label: "电子签章",
          prop: 5,
          img1: require("../../assets/BidSecurity/6-1.png"),
          img2: require("../../assets/BidSecurity/6-2.png"),
          img3: require("../../assets/BidSecurity/6-3.png"),
          status: "todo",
        },
        {
          label: "支付",
          prop: 6,
          img1: require("../../assets/BidSecurity/7-1.png"),
          img2: require("../../assets/BidSecurity/7-2.png"),
          img3: require("../../assets/BidSecurity/7-3.png"),
          status: "todo",
        },
        {
          label: "发放保函",
          prop: 7,
          img1: require("../../assets/BidSecurity/8-1.png"),
          img2: require("../../assets/BidSecurity/8-2.png"),
          img3: require("../../assets/BidSecurity/8-2.png"),
          status: "todo",
        },   
        {
          label: "快递信息",
          prop: 8,
            img1: require("../../assets/BidSecurity/9-3.png"),
          img2: require("../../assets/BidSecurity/9-1.png"),
          img3: require("../../assets/BidSecurity/9-2.png"),
          status: "todo",
        },
      ],
    };
  },
  created() {
    console.log(this); //5
   
    console.log(sessionStorage.getItem("bhlein"))
  },
  methods: {
    next() {
      for (let item of this.list) {
        if (item.status === "active") {
          item.status = "done";
        }

        if (item.status === "todo") {
          item.status = "active";
          if (this.list[this.list.length - 1].status === "active") {
            this.unFinish = false;
          }
          break;
        }
      }
    },
  },
};
</script>

<style scoped>
.icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icontext1{
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.icontext2{
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #1795FF;
}
.icontext3{
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
}
.iconimg {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
}
.hear_BD {
width: 100%;
    padding: 0 5%;
  height: 206px;
  background-color: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrowsBox {
  display: flex;
  justify-content: center;
  width: 100%;
  /* height: 40px; */
  /* margin: 20px; */
  font-weight: bold;
}

.arrowsItem {
  flex:1;
  /* position: relative; */
  height: 154.39px;
  /* width: 188.78px; */
}

/* .arrows-up {
  transform: skewX(10deg);
}

.arrows-down {
  transform: skewX(-10deg);
} */

/* .arrows {
  height: 50%;

  background: gray;
} */

.arrows-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.arrows_done {
  background: #d5e8fa;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.arrows_active {
  /* background-url: #1795FF; */
  background: url(../../assets/BidSecurity/b-2.png);
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.arrows_todo {
  background: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.arrows_label_done {
  color: #009fe9;
}

.arrows_label_active {
  color: #fff;
}

.arrows_label_todo {
  color: #929393;
}

.btn {
  background: #009fe9;
  color: #fff;
  border: none;
  padding: 6px;
  width: 100px;
  border-radius: 4px;
  margin: auto;
  display: block;
}
</style>
